<template>
  <div class="newly">
    <div class="forbid-height" v-if="pageShow == true" @click="forbidHit"></div>

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
      <el-form-item label="盲盒名称" prop="name" class="form-item">
        <el-input v-model="ruleForm.name" placeholder="请输入盲盒名称" clearable></el-input>
      </el-form-item>

      <el-form-item label="盲盒包内容" prop="shopBlindBoxDesc" class="form-item" style="width: 35%">
        <el-input v-model="ruleForm.shopBlindBoxDesc" placeholder="请输入盲盒包内容" clearable :rows="4"
          type="textarea"></el-input>
      </el-form-item>

      <el-form-item label="盲盒封面" prop="goodicon" class="form-banner">
        <div class="banners">
          <el-upload action="https://api-qingchuang.xmw1688.com/common/upload" :show-file-list="false"
            :on-success="handleAvatarSuccessCover" class="img">
            <div class="img">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </div>
          </el-upload>

          <div class="imgs" v-if="ruleForm.goodicon != '' && ruleForm.goodicon != null">
            <el-image :src="ruleForm.goodicon" :preview-src-list="srcList0"></el-image>

            <i class="el-icon-delete" style="
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 20px;
                cursor: pointer;
                color: red;
              " @click="handleRemoveCover"></i>
          </div>
        </div>

        <div class="text">限制上传一张</div>
      </el-form-item>

      <el-form-item label="盲盒图片" prop="banner" class="form-banner">
        <div class="banners">
          <el-upload action="https://api-qingchuang.xmw1688.com/common/upload" :show-file-list="false"
            :on-success="handleAvatarSuccess" class="img" :limit="6">
            <div class="img">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </div>
          </el-upload>

          <div class="imgs" v-for="(item, index) in ruleForm.banner" :key="index">
            <el-image :src="item" :preview-src-list="srcList1"></el-image>

            <i class="el-icon-delete" style="
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 20px;
                cursor: pointer;
                color: red;
              " @click="handleRemove(index)"></i>
          </div>
        </div>
        <div class="text">
          最多可上传6张，图片将在商品详情页轮播展示
        </div>
      </el-form-item>

      <div style="display: flex">
        <el-form-item label="盲盒成本价" prop="costPrice" class="form-virtual" style="width: 35%">
          <el-input v-model="ruleForm.costPrice" placeholder="请输入盲盒成本价" clearable></el-input>
        </el-form-item>

      </div>

      <div style="display: flex">
        <el-form-item label="盲盒原价" prop="lineationPrice" class="form-virtual" style="width: 35%">
          <el-input v-model="ruleForm.lineationPrice" placeholder="请输入盲盒原价" clearable></el-input>
        </el-form-item>

        <el-form-item label="库存" prop="inventoryNum" class="form-virtual" style="width: 35%">
          <el-input v-model="ruleForm.inventoryNum" placeholder="请输入库存" clearable></el-input>
        </el-form-item>
      </div>

      <div style="display: flex">
        <el-form-item label="销售价" prop="retailPrice" class="form-virtual" style="width: 35%">
          <el-input v-model="ruleForm.retailPrice" placeholder="请输入销售价" clearable></el-input>
        </el-form-item>

        <el-form-item label="店铺收益上限" prop="addEarningsPrice" class="form-virtual" style="width: 35%">
          <el-input v-model="ruleForm.addEarningsPrice" placeholder="请输入店铺收益上限" clearable></el-input>
        </el-form-item>
      </div>

      <div style="display: flex">
        <el-form-item label="虚拟销售" prop="purchaseNum" class="form-virtual" style="width: 35%">
          <div>
            <el-input v-model="ruleForm.purchaseNum" placeholder="请输入虚拟销售" clearable></el-input>
            <div class="title">虚拟销量+真实销量为展示在前台的销量</div>
          </div>
        </el-form-item>

        <el-form-item label="可收益下级名额" prop="addUserNum" class="form-virtual" style="width: 35%">
          <el-input v-model="ruleForm.addUserNum" placeholder="请输入可收益下级名额" clearable></el-input>
        </el-form-item>
      </div>

      <div style="display: flex">
        <el-form-item label="盲盒单位" prop="boxUnit" class="form-virtual" style="width: 35%">
          <div>
            <el-input v-model="ruleForm.boxUnit" placeholder="请输入盲盒单位" clearable></el-input>
            <div class="title">数字1代表小盲盒，数组5代表大盲盒</div>
          </div>
        </el-form-item>

        <el-form-item label="获取的直推积分" prop="newBoyIntegral" class="form-virtual" style="width: 35%">
          <el-input v-model="ruleForm.newBoyIntegral" placeholder="请输入获取的直推积分" clearable></el-input>
        </el-form-item>
      </div>

      <el-form-item label="盲盒详情" prop="step" class="form-editor">
        <wang-edit ref="wangEditorRef" v-if="editShow" :editorParams="editorParams" />
      </el-form-item>

      <el-form-item v-if="pageShow == false">
        <div class="form-button">
          <div class="list" @click="addClose('ruleForm')">取消</div>

          <div class="list" @click="addSave('ruleForm')">保存草稿</div>

          <div class="list" @click="addstaySave('ruleForm')">保存待上架</div>

          <div class="list" @click="addStatusSave('ruleForm')">保存并上架</div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import WangEdit from "@/components/wangEditor/RichTextEditor.vue";

import { boxBlindListId, boxBlindListAdd } from "@/api/mystery";

var throttle = require("@/utils/throttle"); // 防抖

export default {
  components: {
    WangEdit,
  },
  data() {
    return {
      id: "",
      pageShow: false, // 是否可修改
      loading: false,
      //---------
      ruleForm: {
        name: "",
        goodicon: "",
        banner: [],
        //----------------------
        retailPrice: "",
        addEarningsPrice: "",
        purchaseNum: "",
        addUserNum: "",
        boxUnit: "",
        newBoyIntegral: "",
        lineationPrice: "",
        inventoryNum: "",
        shopBlindBoxDesc: "",

        //------------
        step: "",
        costPrice: ''
      },
      rules: {
        name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],

        goodicon: [
          {
            required: true,
            message: "请上传盲盒封面",
            trigger: "blur",
          },
        ],
        banner: [
          {
            required: true,
            message: "请选择盲盒图片或者商品",
            trigger: "blur",
          },
        ],

        shopBlindBoxDesc: [
          { required: true, message: "请输入盲盒详情", trigger: "blur" },
        ],

        lineationPrice: [
          { required: true, message: "请输入销售原价", trigger: "blur" },
        ],
        inventoryNum: [
          { required: true, message: "请输入库存", trigger: "blur" },
        ],

        costPrice: [
          { required: true, message: "请输入成本价", trigger: "blur" },
        ],
        retailPrice: [
          { required: true, message: "请输入销售价", trigger: "blur" },
        ],
        addEarningsPrice: [
          { required: true, message: "请输入店铺收益上限", trigger: "blur" },
        ],
        purchaseNum: [
          { required: true, message: "请输入虚拟销售", trigger: "blur" },
        ],

        addUserNum: [
          { required: true, message: "请输入可收益下级名额", trigger: "blur" },
        ],
        boxUnit: [
          { required: true, message: "请输入盲盒单位", trigger: "blur" },
        ],
        newBoyIntegral: [
          { required: true, message: "请输入获取的直推积分", trigger: "blur" },
        ],

        step: [{ required: true, message: "请输入盲盒详情", trigger: "blur" }],
      },
      //--------模拟
      commonObj: {},
      srcList1: [],
      stockSecondList: [],
      srcList0: [],
      //-----------
      editShow: false,
      editorParams: {
        content: "", // 富文本内容
        placeholder: "请填写内容", // 富文本占位内容
        uploadImageUrl: "/file", // 富文本上传图片的地址
        height: "400px", // 富文本最小高度
        isDisabled: false, // 富文本是否禁用
      },
    };
  },
  created() {
    if (this.$route.query.id) {
      this.pageShow = this.$route.query.source == 0 ? true : false;
      this.id = this.$route.query.id;
      this.loading = false;
      this.boxBlindListIdMet();
    }
  },
  mounted() {
    this.editShow = true;
  },
  methods: {
    boxBlindListIdMet() {
      let params = this.id;

      boxBlindListId(params).then((res) => {
        if (res.errorCode == null) {
          this.commonObj = res.resultData;
          this.loading = true;
          //----------------------
          this.ruleForm.name = res.resultData.shopBlindBoxName;
          this.ruleForm.goodicon = res.resultData.shopBlindBoxIcon;

          if (res.resultData.shopBlindBoxImage != null) {
            this.ruleForm.banner = res.resultData.shopBlindBoxImage.split(";");
          }
          //------------------------------
          this.ruleForm.shopBlindBoxDesc = res.resultData.shopBlindBoxDesc;
          this.ruleForm.retailPrice = res.resultData.retailPrice / 100;
          this.ruleForm.addEarningsPrice =
            res.resultData.addEarningsPrice / 100;
          this.ruleForm.purchaseNum = res.resultData.purchaseNum;
          this.ruleForm.addUserNum = res.resultData.addUserNum;
          this.ruleForm.boxUnit = res.resultData.boxUnit;
          this.ruleForm.newBoyIntegral = res.resultData.newBoyIntegral;
          this.ruleForm.costPrice = res.resultData.costPrice / 100
          this.ruleForm.lineationPrice = res.resultData.lineationPrice / 100;
          this.ruleForm.inventoryNum = res.resultData.inventoryNum;

          this.editorParams.content = res.resultData.shopBlindBoxDetail;
        }
      });
    },
    //-----------------------
    forbidHit() {
      this.$message.error("当前详情页，禁止修改");
    },
    //---------上传
    handleAvatarSuccessCover(res, file) {
      this.ruleForm.goodicon = res.resultData;
      this.srcList0 = [res.resultData];
    },
    handleRemoveCover() {
      this.ruleForm.goodicon = "";
    },
    //---------上传
    handleAvatarSuccess(res, file) {
      if (this.ruleForm.banner.length < 6) {
        this.ruleForm.banner.push(res.resultData);

        this.srcList1 = this.ruleForm.banner;
      } else {
        this.$message.error(
          "最多可上传6张，图片将在商品详情页轮播展示！"
        );
      }
    },
    handleRemove(index) {
      if (this.pageShow == true) {
        this.forbidHit();
        return;
      }

      this.ruleForm.banner.splice(index, 1);
    },

    //------------
    setHtml(html) {
      // 回显富文本框中内容
      let _this = this;
      this.$nextTick(() => {
        // 此处用来解决富文本编辑器未完全加载的问题
        setTimeout(() => {
          _this.$refs.wangEditorRef.setEditorHtml(html);
        }, 200);
      });
    },
    getHtml() {
      this.$refs.wangEditorRef.getEditorHtml();
    },
    //-------------------------------------------------------------
    addClose(formName) {
      this.$router.push({
        path: "/mystery/list",
      });

      this.$refs[formName].resetFields();
    },
    addSave: throttle.throttle(function (formName) {
      this.ruleForm.step =
        this.$refs.wangEditorRef.getEditorHtml() == "<p><br></p>"
          ? ""
          : this.$refs.wangEditorRef.getEditorHtml();

      //----------------
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let banners = "";
          if (this.ruleForm.banner.length > 0) {
            banners = this.ruleForm.banner.join(";");
          } else {
            banners = "";
          }

          let params = {
            shopBlindBoxId: this.id,
            shopBlindBoxName: this.ruleForm.name,
            shopBlindBoxIcon: this.ruleForm.goodicon,
            shopBlindBoxImage: banners,
            shopBlindBoxDesc: this.ruleForm.shopBlindBoxDesc,
            shopBlindBoxDetail: this.ruleForm.step,
            costPrice: Number(this.ruleForm.costPrice * 100),
            lineationPrice: Number(this.ruleForm.lineationPrice * 100),
            retailPrice: Number(this.ruleForm.retailPrice * 100),
            inventoryNum: this.ruleForm.inventoryNum,
            purchaseNum: this.ruleForm.purchaseNum,
            addUserNum: this.ruleForm.addUserNum,
            addEarningsPrice: Number(this.ruleForm.addEarningsPrice * 100),
            newBoyIntegral: this.ruleForm.newBoyIntegral,
            boxUnit: this.ruleForm.boxUnit,
            isStatus: -1,
          };

          boxBlindListAdd(params).then((res) => {
            if (res.errorCode == null) {
              if (this.id == "") {
                this.$message.success("新增盲盒成功！");
              } else {
                this.$message.success("修改盲盒成功！");
              }

              setTimeout(() => {
                this.$router.push({
                  path: "/mystery/list",
                });
              });
            }
          });
        } else {
          return false;
        }
      });
    }, 3000),
    addstaySave: throttle.throttle(function (formName) {
      this.ruleForm.step =
        this.$refs.wangEditorRef.getEditorHtml() == "<p><br></p>"
          ? ""
          : this.$refs.wangEditorRef.getEditorHtml();

      //----------------
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let banners = "";
          if (this.ruleForm.banner.length > 0) {
            banners = this.ruleForm.banner.join(";");
          } else {
            banners = "";
          }

          let params = {
            shopBlindBoxId: this.id,
            shopBlindBoxName: this.ruleForm.name,
            shopBlindBoxIcon: this.ruleForm.goodicon,
            shopBlindBoxImage: banners,
            shopBlindBoxDesc: this.ruleForm.shopBlindBoxDesc,
            shopBlindBoxDetail: this.ruleForm.step,
            costPrice: Number(this.ruleForm.costPrice * 100),
            lineationPrice: Number(this.ruleForm.lineationPrice * 100),
            retailPrice: Number(this.ruleForm.retailPrice * 100),
            inventoryNum: this.ruleForm.inventoryNum,
            purchaseNum: this.ruleForm.purchaseNum,
            addUserNum: this.ruleForm.addUserNum,
            addEarningsPrice: Number(this.ruleForm.addEarningsPrice * 100),
            newBoyIntegral: this.ruleForm.newBoyIntegral,
            boxUnit: this.ruleForm.boxUnit,
            isStatus: 0,
          };

          boxBlindListAdd(params).then((res) => {
            if (res.errorCode == null) {
              if (this.id == "") {
                this.$message.success("新增盲盒成功！");
              } else {
                this.$message.success("修改盲盒成功！");
              }

              setTimeout(() => {
                this.$router.push({
                  path: "/mystery/list",
                });
              });
            }
          });
        } else {
          return false;
        }
      });
    }, 3000),
    addStatusSave: throttle.throttle(function (formName) {
      this.ruleForm.step =
        this.$refs.wangEditorRef.getEditorHtml() == "<p><br></p>"
          ? ""
          : this.$refs.wangEditorRef.getEditorHtml();

      //----------------
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let banners = "";
          if (this.ruleForm.banner.length > 0) {
            banners = this.ruleForm.banner.join(";");
          } else {
            banners = "";
          }

          let params = {
            shopBlindBoxId: this.id,
            shopBlindBoxName: this.ruleForm.name,
            shopBlindBoxIcon: this.ruleForm.goodicon,
            shopBlindBoxImage: banners,
            shopBlindBoxDesc: this.ruleForm.shopBlindBoxDesc,
            shopBlindBoxDetail: this.ruleForm.step,
            costPrice: Number(this.ruleForm.costPrice * 100),
            lineationPrice: Number(this.ruleForm.lineationPrice * 100),
            retailPrice: Number(this.ruleForm.retailPrice * 100),
            inventoryNum: this.ruleForm.inventoryNum,
            purchaseNum: this.ruleForm.purchaseNum,
            addUserNum: this.ruleForm.addUserNum,
            addEarningsPrice: Number(this.ruleForm.addEarningsPrice * 100),
            newBoyIntegral: this.ruleForm.newBoyIntegral,
            boxUnit: this.ruleForm.boxUnit,
            isStatus: 1,
          };

          boxBlindListAdd(params).then((res) => {
            if (res.errorCode == null) {
              if (this.id == "") {
                this.$message.success("新增盲盒成功！");
              } else {
                this.$message.success("修改盲盒成功！");
              }

              setTimeout(() => {
                this.$router.push({
                  path: "/mystery/list",
                });
              });
            }
          });
        } else {
          return false;
        }
      });
    }, 3000),
  },
};
</script>

<style lang="less" scoped>
.newly {
  position: relative;

  .forbid-height {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
    display: flex;
  }

  .demo-ruleForm {
    /deep/ .el-form-item__content {
      width: 64%;
      margin-left: 0 !important;
    }

    .form-item {
      width: 500px;
      display: flex;

      /deep/ .el-cascader {
        width: 100%;
      }

      /deep/ .el-select {
        width: 100%;
      }

      /deep/ .el-textarea {
        width: 320px;
      }
    }

    .form-banner {
      .banners {
        /deep/ .el-form-item__content {
          display: flex;
        }

        display: flex;

        .img {
          width: 100px;
          height: 100px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #ccc;
          border-radius: 5px;
        }

        .imgs {
          width: 100px;
          height: 100px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #ccc;
          margin-left: 10px;
          border-radius: 5px;
          position: relative;

          /deep/ .el-image {
            width: 100px;
            height: 100px;
          }
        }
      }

      .text {
        color: #999;
        margin-left: 140px;
      }

      /deep/ .el-form-item__error {
        margin-left: 140px;
      }
    }

    .form-stock {
      /deep/ .el-form-item__content {
        width: 100%;
        margin-left: 0 !important;
      }

      /deep/ .el-form-item__error {
        margin-left: 140px;
      }

      .stock {
        width: 70%;
        display: flex;

        .adds {
          cursor: pointer;
          margin-left: 20px;
          height: 38px;
          width: 100px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px dashed #ccc;
          color: #999;
        }
      }

      .array {
        width: 70%;
        margin-top: 10px;
        margin-left: 140px;

        .list {
          display: flex;
          align-items: center;
          margin-bottom: 10px;

          .title {
            min-width: 120px;
            height: 35px;
            width: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #ccc;
            color: rgba(0, 0, 0, 0.5);
          }

          .parallel {
            margin-left: 20px;
            padding: 10px 10px 0;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            border: 1px dashed #ccc;

            .parallel-list {
              min-width: 120px;
              height: 35px;
              width: 120px;
              display: flex;
              align-items: center;
              justify-content: center;
              border: 1px solid #ccc;
              margin-right: 10px;
              margin-bottom: 10px;
              color: rgba(0, 0, 0, 0.5);
            }

            .nature {
              cursor: pointer;
              color: #2a82e4;
              border: 1px dashed #2a82e4;
            }
          }
        }
      }

      .table {
        margin-top: 10px;
        margin-left: 140px;
        width: 90%;

        .parallel {
          display: flex;
          flex-wrap: wrap;

          .tags {
            margin-right: 10px;
            height: 40px;
            display: flex;
            align-items: center;
          }
        }
      }
    }

    .form-virtual {
      /deep/ .el-form-item__content {
        display: flex;
      }

      /deep/ .el-input {
        width: 320px;
      }

      .title {
        color: #999;
      }
    }

    .form-editor {
      /deep/ .el-form-item__content {
        width: 64%;
        margin-left: 140px !important;
      }

      margin-top: 40px;
      width: 70%;
    }

    .form-button {
      margin-left: 140px;
      display: flex;
      align-items: center;

      /deep/ .el-form-item__content {
        line-height: 0;
      }

      .list {
        background: #3da8f5;
        color: #fff;
        font-size: 16px;
        margin-right: 20px;
        border-radius: 5px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0 20px;
        box-sizing: border-box;
      }

      .list:first-child {
        background: #808080;
      }
    }
  }
}
</style>